<#include "/default/utils/ui.ftl"/>
<section class="focusbox">
    <div class="container">
        <h1 class="focusbox-title">留言板</h1>
        <div class="focusbox-text">留下你的足迹,我在这里一直等候着你！</div>
    </div>
</section>
<@layout "留言板">

<div class="row">

    <div class="content">
        <div class="container space30">
            <div class="row">
                <!--feature start-->
                <div class="col-xs-12 col-md-9 side-left wow fadeInUp animated"
                     style="visibility: visible; animation-name: fadeInUp;">
                    <!-- Comments -->
                    <@controls name="comment">
                    <div id="chat" class="chats shadow-box">
                        <div class="chat_other">
                            <h4>全部评论: <span id="chat_count">0</span> 条</h4>
                        </div>
                        <ul id="chat_container" class="its"></ul>
                        <div id="pager" class="text-center"></div>
                        <div class="cbox-wrap">
                            <div class="cbox-title">我有话说: <span id="chat_reply" style="display:none;">@<i
                                    id="chat_to"></i></span>
                            </div>
                            <div class="cbox-post">
                                <div class="cbox-input">
                                    <textarea id="chat_text" rows="3" placeholder="请输入评论内容"></textarea>
                                    <input type="hidden" value="0" name="chat_pid" id="chat_pid"/>
                                    <input type="hidden" value="leave" name="chat_tags" id="chat_tags"/>
                                </div>
                                <div class="cbox-ats clearfix">
                                    <div class="ats-func">
                                        <div class="OwO" id="face-btn"></div>
                                    </div>
                                    <div class="ats-issue">
                                        <button id="btn-chat" class="btn btn-success btn-sm bt">发送</button>
                                    </div>
                                </div>
                            </div>
                            <div class="phiz-box" id="c-phiz" style="display:none">
                                <div class="phiz-list" view="c-phizs"></div>
                            </div>
                        </div>
                    </div>
                </@controls>

            </div>
            <div class="col-xs-12 col-md-3 side-right sidebar wow fadeInUp animated"
                 style="visibility: visible; animation-name: fadeInUp;">
                <div class="widget widget-posts">
                    <a href="#" target="_blank" rel="nofollow">
                        <img src="/storage/thumbnails/2019/0219/19164602pywv.jpg" class="full-img">
                    </a>
                </div>

                <div class="widget widget-posts">
                    <a href="#" target="_blank" rel="nofollow">
                        <img src="/storage/thumbnails/2019/0219/19164602pywv.jpg" class="full-img">
                    </a>
                </div>

            </div>
            <!--feature end-->
        </div>
    </div>
</div>

</div>
<script type="text/plain" id="chat_template">
    <li id="chat{5}">
        <a class="avt fl" target="_blank" href="${base}/users/{0}">
            <img src="{1}">
        </a>
        <div class="chat_body">
            <h5>
                <div class="fl"><a class="chat_name" href="${base}/users/{0}">{2}</a><span>{3}</span></div>
                <div class="fr reply_this"><a href="javascript:void(0);" onclick="goto('{5}', '{2}')">[回复]</a></div>
                <div class="clear"></div>
            </h5>
            <div class="chat_p">
                <div class="chat_pct">{4}</div> {6}
            </div>
        </div>
        <div class="clear"></div>
        <div class="chat_reply"></div>
    </li>
</script>
<script type="text/javascript">
    function goto(pid, user) {
        document.getElementById('chat_text').scrollIntoView();
        $('#chat_text').focus();
        $('#chat_text').val('');
        $('#chat_to').text(user);
        $('#chat_pid').val(pid);
        $('#chat_reply').show();
    }
    var container = $("#chat_container");
    var template = $('#chat_template')[0].text;

    seajs.use(['comment', 'view'], function (comment) {
        comment.init({
            load: '${site.controls.comment}',
            load_url: '${base}/comment/leave/leave',
            post_url: '${base}/comment/submit',
            toId: '${view.id}',
            onLoad: function (i, data) {
                var content = data.content;
                var quoto = '';
                if (data.pid > 0 && !(data.parent === null)) {
                    var pat = data.parent;
                    var pcontent = pat.content;
                    quoto = '<div class="quote"><a href="${base}/users/' + pat.author.id + '">@' + pat.author.name + '</a>: ' + pcontent + '</div>';
                }
                var item = jQuery.format(template,
                    data.author.id,
                    data.author.avatar,
                    data.author.name,
                    data.created,
                    content,
                    data.id, quoto);
                return item;
            }
        });
    });

</script>
</@layout>